import React from 'react';
import { observer, inject } from 'mobx-react';
import { getAntd, getLabel, getEcCom } from '../../util/convert';
import * as Util from '../../util/continuationProcessUtil';
import { doSubmitForm } from '../../util/submit';
import '../../style/continuationProcess.less';
import base from '../../util/base';

@observer
export default class Main extends React.Component {
    constructor() {
        super();
        this.state = {
          continuationProcessInfo : {},
          saveData : 1
        };
    }

    componentDidMount() {
      const { location = {} } = this.props;
      const { query = {} } = location;
      //单页进来，从query中取数据
      if(query.isSingle) {
        let newContinuationProcessInfo =  {
          isSingle : '1',
          currentIndex : query.currentIndex,
          counts : query.counts,
          requestId : query.requestId
        };
        base.globalStore.continuationProcessInfo = newContinuationProcessInfo;
        this.setState({continuationProcessInfo : newContinuationProcessInfo});
      }
    }

    render() {
      const { location = {} } = this.props;
      const { query = {} } = location;
      const continuationProcessInfo = query.isSingle ? this.state.continuationProcessInfo : this.props.continuationProcessInfo;
      const { currentIndex = 0, counts = 0 } = continuationProcessInfo;
      let spanLabel = getLabel(517273, '第{current}条（共{counts}条）');
      spanLabel = spanLabel.replace(/{current}/, parseInt(currentIndex) + 1);
      spanLabel = spanLabel.replace(/{counts}/, counts);
      return (
          <div className="wf-continuationProcess-div">
              <div className="wf-continuationProcess-title">
              <span>{spanLabel}</span>
                <div className="wf-continuationProcess-title-pageSwitch">
                  <span className={(currentIndex != 0) ? 'icon-coms02-backward first' : 'icon-coms02-backward first disabled'} onClick={() => { (currentIndex != 0) && this.switchRequestNeedConfirm('first'); }} />
                  <span className={(currentIndex != 0) ? 'prePage' : 'pre-disabled'} onClick={() => { (currentIndex != 0) && this.switchRequestNeedConfirm('pre'); }}>{getLabel(515115, '上一条')}</span>
                  <span className={(currentIndex != counts - 1) ? 'nextPage' : 'disabled'} onClick={() => { (currentIndex != counts - 1) && this.switchRequestNeedConfirm('next'); }}>{getLabel(515116, '下一条')}</span>
                  <span className={(currentIndex != counts - 1) ? 'icon-coms02-Forward-1 last' : 'icon-coms02-Forward-1 last disabled'} onClick={() => { (currentIndex != counts - 1) && this.switchRequestNeedConfirm('last'); }} />
                </div>
              </div>
              { query.isSingle && <iframe className='wf-continuationProcess-iframe' src = {this.getIframeUrl()}></iframe>}
          </div>
      );
    }

    // 连续处理切换流程（需确认）
    switchRequestNeedConfirm = (type) => {
      const { existChangeFormData } = base.layoutStore;
      const { commonParam } = base.globalStore;
      const { Modal } = getAntd();
      const { WeaCheckbox } = getEcCom();
      const that = this;
      if (existChangeFormData) {
          Modal.confirm({
              title: getLabel(131329, '信息确认'),
              content: <div>
                          <div>{getLabel(528822, '流程表单信息已被手动或系统自动修改，确定要离开当前页面吗？')}</div>
                          {commonParam.isviewonly == 0 && <WeaCheckbox
                              id='saveData'
                              content={getLabel(528821, '离开时保存当前数据')}
                              style={{paddingTop : '20px'}}
                              value = {this.state.saveData}
                              onChange = {(v) => {
                                this.setState({saveData : v})
                              }}
                          />}
                      </div>,
              okText: getLabel(826, '确定'),
              cancelText: getLabel(201, '取消'),
              onOk() {
                  if(that.state.saveData == 1 && commonParam.isviewonly == 0) {
                    doSubmitForm({ actiontype: 'requestOperation', src: 'save', closePage: false, continuationSwitchType : type });
                  } else {
                    Util.switchRequest(type);
                  }
              },
              onCancel() {
              },
          });
      } else {
          Util.switchRequest(type);
      }
    };

    getIframeUrl = () => {
      const { location = {} } = this.props;
      const { query = {} } = location;
      let url = query.url;
      let urlParams = '?';
      Object.keys(query).map(key => {
        if(key != 'url') {
          urlParams += key + "=" + query[key] + "&";
        }
      })
      if(urlParams.length > 1) {
        urlParams = urlParams.substring(0, urlParams.length - 1);
      }
      return url + urlParams;
    }
  }
